import { computed, defineComponent, ref } from 'vue';
import Basic from './Basic.vue';
import BeforeAfterHeaderFooter from './BeforeAfterHeaderFooter.vue';
import CustomColor from './CustomColor.vue';
import CustomColumn from './CustomColumn.vue';
import CustomLoading from './CustomLoading.vue';
import CustomSelection from './CustomSelection.vue';
import CustomSorting from './CustomSorting.vue';
import CustomTop from './CustomTop.vue';
import Dark from './Dark.vue';
import Dense from './Dense.vue';
import ExpandedRowExternal from './ExpandedRowExternal.vue';
import ExpandedRowInternal from './ExpandedRowInternal.vue';
import ExportCsv from './ExportCsv.vue';
import GridHeader from './GridHeader.vue';
import GridMasonry from './GridMasonry.vue';
import GridStyle from './GridStyle.vue';
import GridStyleColored from './GridStyleColored.vue';
import GridStyleSlot from './GridStyleSlot.vue';
import HideBottom from './HideBottom.vue';
import InferColumns from './InferColumns.vue';
import KeyboardNavigation from './KeyboardNavigation.vue';
import Loading from './Loading.vue';
import MultipleSelection from './MultipleSelection.vue';
import NoData from './NoData.vue';
import NoDataSlot from './NoDataSlot.vue';
import NoHeaderFooter from './NoHeaderFooter.vue';
import PaginationInitial from './PaginationInitial.vue';
import PaginationSlot from './PaginationSlot.vue';
import PaginationSync from './PaginationSync.vue';
import PopupEditing from './PopupEditing.vue';
import ResponsiveDense from './ResponsiveDense.vue';
import ResponsiveGrid from './ResponsiveGrid.vue';
import SelectionSlots from './SelectionSlots.vue';
import SelectionSlotsRange from './SelectionSlotsRange.vue';
import Separators from './Separators.vue';
import SingleSelection from './SingleSelection.vue';
import SlotBody from './SlotBody.vue';
import SlotBodyCell from './SlotBodyCell.vue';
import SlotBodyCellName from './SlotBodyCellName.vue';
import SlotHeader from './SlotHeader.vue';
import SlotHeaderCell from './SlotHeaderCell.vue';
import SlotHeaderCellName from './SlotHeaderCellName.vue';
import StickyColumn from './StickyColumn.vue';
import StickyHeader from './StickyHeader.vue';
import StickyHeaderAndColumn from './StickyHeaderAndColumn.vue';
import StickyHeaderAndLastColumn from './StickyHeaderAndLastColumn.vue';
import StickyLastColumn from './StickyLastColumn.vue';
import Synchronizing from './Synchronizing.vue';
import VirtscrollBasic from './VirtscrollBasic.vue';
import VirtscrollDynamic from './VirtscrollDynamic.vue';
import VirtscrollExpandedRow from './VirtscrollExpandedRow.vue';
import VirtscrollMultipleRows from './VirtscrollMultipleRows.vue';
import VirtscrollPagination from './VirtscrollPagination.vue';
import VirtscrollSticky from './VirtscrollSticky.vue';
import VisibleColumns from './VisibleColumns.vue';
import VisibleColumns2 from './VisibleColumns2.vue';

export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    return () => {
      return (
        <div class='block'>
          <div class='block-'>
            <h5 class='title'>Basic</h5>
            <Basic />
          </div>
          <div class='block-'>
            <h5 class='title'>BeforeAfterHeaderFooter</h5>
            <BeforeAfterHeaderFooter />
          </div>
          <div class='block-'>
            <h5 class='title'>CustomColor</h5>
            <CustomColor />
          </div>
          <div class='block-'>
            <h5 class='title'>CustomColumn</h5>
            <CustomColumn />
          </div>
          <div class='block-'>
            <h5 class='title'>CustomLoading</h5>
            <CustomLoading />
          </div>
          <div class='block-'>
            <h5 class='title'>CustomSelection</h5>
            <CustomSelection />
          </div>
          <div class='block-'>
            <h5 class='title'>CustomSorting</h5>
            <CustomSorting />
          </div>
          <div class='block-'>
            <h5 class='title'>CustomTop</h5>
            <CustomTop />
          </div>
          <div class='block-'>
            <h5 class='title'>Dark</h5>
            <Dark />
          </div>
          <div class='block-'>
            <h5 class='title'>Dense</h5>
            <Dense />
          </div>
          <div class='block-'>
            <h5 class='title'>ExpandedRowExternal</h5>
            <ExpandedRowExternal />
          </div>
          <div class='block-'>
            <h5 class='title'>ExpandedRowInternal</h5>
            <ExpandedRowInternal />
          </div>
          <div class='block-'>
            <h5 class='title'>ExportCsv</h5>
            <ExportCsv />
          </div>
          <div class='block-'>
            <h5 class='title'>GridHeader</h5>
            <GridHeader />
          </div>
          <div class='block-'>
            <h5 class='title'>GridMasonry</h5>
            <GridMasonry />
          </div>
          <div class='block-'>
            <h5 class='title'>GridStyle</h5>
            <GridStyle />
          </div>
          <div class='block-'>
            <h5 class='title'>GridStyleColored</h5>
            <GridStyleColored />
          </div>
          <div class='block-'>
            <h5 class='title'>GridStyleSlot</h5>
            <GridStyleSlot />
          </div>
          <div class='block-'>
            <h5 class='title'>HideBottom</h5>
            <HideBottom />
          </div>
          <div class='block-'>
            <h5 class='title'>InferColumns</h5>
            <InferColumns />
          </div>
          <div class='block-'>
            <h5 class='title'>KeyboardNavigation</h5>
            <KeyboardNavigation />
          </div>
          <div class='block-'>
            <h5 class='title'>Loading</h5>
            <Loading />
          </div>
          <div class='block-'>
            <h5 class='title'>MultipleSelection</h5>
            <MultipleSelection />
          </div>
          <div class='block-'>
            <h5 class='title'>NoData</h5>
            <NoData />
          </div>
          <div class='block-'>
            <h5 class='title'>NoDataSlot</h5>
            <NoDataSlot />
          </div>
          <div class='block-'>
            <h5 class='title'>NoHeaderFooter</h5>
            <NoHeaderFooter />
          </div>
          <div class='block-'>
            <h5 class='title'>PaginationInitial</h5>
            <PaginationInitial />
          </div>
          <div class='block-'>
            <h5 class='title'>PaginationSlot</h5>
            <PaginationSlot />
          </div>
          <div class='block-'>
            <h5 class='title'>PaginationSync</h5>
            <PaginationSync />
          </div>
          <div class='block-'>
            <h5 class='title'>PopupEditing</h5>
            <PopupEditing />
          </div>
          <div class='block-'>
            <h5 class='title'>ResponsiveDense</h5>
            <ResponsiveDense />
          </div>
          <div class='block-'>
            <h5 class='title'>ResponsiveGrid</h5>
            <ResponsiveGrid />
          </div>
          <div class='block-'>
            <h5 class='title'>SelectionSlots</h5>
            <SelectionSlots />
          </div>
          <div class='block-'>
            <h5 class='title'>SelectionSlotsRange</h5>
            <SelectionSlotsRange />
          </div>
          <div class='block-'>
            <h5 class='title'>Separators</h5>
            <Separators />
          </div>
          <div class='block-'>
            <h5 class='title'>SingleSelection</h5>
            <SingleSelection />
          </div>
          <div class='block-'>
            <h5 class='title'>SlotBody</h5>
            <SlotBody />
          </div>
          <div class='block-'>
            <h5 class='title'>SlotBodyCell</h5>
            <SlotBodyCell />
          </div>
          <div class='block-'>
            <h5 class='title'>SlotBodyCellName</h5>
            <SlotBodyCellName />
          </div>
          <div class='block-'>
            <h5 class='title'>SlotHeader</h5>
            <SlotHeader />
          </div>
          <div class='block-'>
            <h5 class='title'>SlotHeaderCell</h5>
            <SlotHeaderCell />
          </div>
          <div class='block-'>
            <h5 class='title'>SlotHeaderCellName</h5>
            <SlotHeaderCellName />
          </div>
          <div class='block-'>
            <h5 class='title'>StickyColumn</h5>
            <StickyColumn />
          </div>
          <div class='block-'>
            <h5 class='title'>StickyHeader</h5>
            <StickyHeader />
          </div>
          <div class='block-'>
            <h5 class='title'>StickyHeaderAndColumn</h5>
            <StickyHeaderAndColumn />
          </div>
          <div class='block-'>
            <h5 class='title'>StickyHeaderAndLastColumn</h5>
            <StickyHeaderAndLastColumn />
          </div>
          <div class='block-'>
            <h5 class='title'>StickyLastColumn</h5>
            <StickyLastColumn />
          </div>
          <div class='block-'>
            <h5 class='title'>Synchronizing</h5>
            <Synchronizing />
          </div>
          <div class='block-'>
            <h5 class='title'>VirtscrollBasic</h5>
            <VirtscrollBasic />
          </div>
          <div class='block-'>
            <h5 class='title'>VirtscrollDynamic</h5>
            <VirtscrollDynamic />
          </div>
          <div class='block-'>
            <h5 class='title'>VirtscrollExpandedRow</h5>
            <VirtscrollExpandedRow />
          </div>
          <div class='block-'>
            <h5 class='title'>VirtscrollMultipleRows</h5>
            <VirtscrollMultipleRows />
          </div>
          <div class='block-'>
            <h5 class='title'>VirtscrollPagination</h5>
            <VirtscrollPagination />
          </div>
          <div class='block-'>
            <h5 class='title'>VirtscrollSticky</h5>
            <VirtscrollSticky />
          </div>
          <div class='block-'>
            <h5 class='title'>VisibleColumns</h5>
            <VisibleColumns />
          </div>
          <div class='block-'>
            <h5 class='title'>VisibleColumns2</h5>
            <VisibleColumns2 />
          </div>
        </div>
      );
    };
  },
});
